<!DOCTYPE html>
<html lang="en" xmlns:v-color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7.css">
</head>
<body>

<div id="app">

    <input type="text" class="form-control" v-focus v-color:foo.a.b="'red'">

    <label v-fontsize="'30px'">这是一个私有指令的 'v-fontsize'</label>
    <br>
    <label v-fontweight="900">这是一个私有指令的 'v-fontweight'</label>
</div>
<script>

    //使用 Vue.directive()定义全局指令 （https://cn.vuejs.org/v2/guide/custom-directive.html）
    //参数1：指令的名称。注意：在定义指令时，指令的名称前面不需要添加 v- 前缀；但是在调用的时候，需要在指令名称的前面添加 v- 前缀
    //参数2：是一个对象。这个对象身上有一些指令相关的函数。

    //自定义 全局指令 v-focus （聚焦指令）
    Vue.directive('focus', {

        //注意： 下面函数中的第一个参数 都是这个调用该指令的元素， 也是一个 原生的JS对象,可以直接用来操作DOM

        bind: function (el) {
            // bind：每当指令绑定到这个 el 元素上时，会立即执行这个 bind 函数。【只执行一次】

            //和样式相关的操作，一般都可以在 bind 中去执行。

            //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用 JS对象 focus 方法没有作用，因为：一个元素只有插入DOM之后，才能获取焦点
            // el.focus()

        },
        inserted: function (el) {
            //inserted：表示元素插入到DOM中的时候，会执行 inserted 函数 【只执行一次】

            //和JS行为有关的操作，最好在 inserted 中去执行，防止JS行为不生效
            el.focus()
        },
        update: function (el) {
            //update: 当VNode更新的时候，会执行 update 函数。【可能会执行多次】
        }
    })


    //自定义 全局指令 v-color // 设置字体颜色
    Vue.directive('color', function (el, binding) {// 注意： 这个 function 等同于把代码写到了 bind 和 update 中。

        // console.log(JSON.stringify(binding))

        console.log('name = ' + binding.name
            + ' value = ' + binding.value
            + ' expression = ' + binding.expression
            + ' argument = ' + binding.arg
            + ' modifiers = ' + JSON.stringify(binding.modifiers)
        )

        el.style.color = binding.value
    })


    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        directives: {//自定义 私有指令

            'fontweight': {//设置字体粗细
                bind: function (el, binding) {
                    el.style.fontWeight = binding.value
                }
            },

            'fontsize': function (el, binding) {// 注意： 这个 function 等同于把代码写到了 bind 和 update 中。
                //设置字体大小
                console.log(binding.value)
                console.log(parseInt(binding.value))

                el.style.fontSize = parseInt(binding.value) + 'px'
            }
        },

    })
</script>
</body>
</html>
